<template>
  <div>
    <div class="top">
      <van-row class="top-box">
        <van-col span="12" class="left">当前处理人</van-col>
        <van-col span="12" class="right">申请时间:{{info.sj}}</van-col>
      </van-row>
      <van-row  class="pad">
        <van-col span="12" class="left">当前状态: 已结束</van-col>
        <van-col span="12" class="right">申请者: {{info.username}}</van-col>
      </van-row>
      <van-row class="pad">
        <van-col span="12" class="left">流转记录: <a class="a" href="#">查看流转记录</a></van-col>
        <van-col span="12" class="right">图形监控: <a class="a" href="#">查看流程图</a></van-col>
      </van-row>
    </div>

    <h1 class="title">学生外出申请</h1>
    <table data-sort="sortDisabled" class="linkeytable">
      <tbody>
        <tr class="firstRow">
          <td width="260" valign="middle" class="texttd">申请单号</td>
          <td width="35%"><span id="WF_DocNumber">2021060857</span></td>
        </tr>
        <tr>
          <td width="260" valign="middle" class="texttd">申请时间</td>
          <td width="260" valign="middle">
            <span id="ApplyDate" v-if="info.sj">{{info.sj.split(' ')[0]}}</span>
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td width="260" valign="middle" class="texttd">申请人</td>
          <td>
            <span id="SQR">{{info.username}}</span>&nbsp;(<span id="SQRID">{{info.xh}}</span
            >)
          </td>
        </tr>
        <tr>
          <td width="260" valign="middle" class="texttd">联系电话</td>
          <td width="260" valign="middle"><span id="Tel">{{info.phone}}</span></td>
        </tr>
        <tr></tr>
        <tr>
          <td width="260" valign="middle" class="texttd">所在学院</td>
          <td width="260" valign="middle"><span id="XY">{{info.xy}}</span></td>
        </tr>
        <tr>
          <td width="260" valign="middle" class="texttd">所在专业</td>
          <td width="260" valign="middle">
            <span id="ZY">{{info.zy}}</span>
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td width="260" valign="middle" class="texttd">年级</td>
          <td width="260" valign="middle"><span id="NJ">{{info.nj}}</span></td>
        </tr>
        <tr>
          <td width="260" valign="middle" class="texttd">所在班级</td>
          <td width="260" valign="middle"><span id="BJ">{{info.bj}}</span></td>
        </tr>
        <tr></tr>
        <tr>
          <td width="260" valign="middle" class="texttd">外出时间</td>
          <td valign="middle" rowspan="1" colspan="1">
            <span id="WCSJ">{{info.wcsj}}</span>
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td width="260" valign="middle" class="texttd">外出事由</td>
          <td valign="middle" rowspan="1" colspan="1">
            <span id="WCSY">{{info.sy}}</span>
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td width="260" valign="middle" class="texttd">附件</td>
          <td valign="middle" rowspan="1" colspan="1">
            <div id="file1" readtype="true" class="attachmentlist"></div>
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td width="260" valign="middle" class="texttd">审批意见</td>
          <td valign="middle" rowspan="1" colspan="1">
            <span
              id="remark1"
              name="remark1"
              type="remark"
              remarktype="ALL"
              class="ue_t"
              >
              <div style="fontSize:12px;text-align:left;padding-left: 8px; color: rgb(0, 102, 204)">
                同意
              </div>
              <div align="right" style="fontSize:12px;text-align:left;padding-left: 4vw;">
                <span>辅导员意见 </span>
                <span style="color: rgb(51, 153, 0);">{{info.fd}}/广州城建职业学院/{{info.xy}} </span>
                <span style="color: rgb(153, 153, 153);">{{tysj}}</span>
                <!-- <font color="#339900"
                  ></font
                >
                <font color="#999999"> 2021-05-28 18:20</font> -->
              </div>
              <hr
                align="left"
                style="
                  border: 1px dashed rgb(204, 204, 204);
                  width: 98%;
                  height: 1px;
                "
            /></span>
          </td>
        </tr>
        <tr></tr>
      </tbody>
    </table>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "page",
  data() {
    return {
      info: {},
      tysj:null
    };
  },
  created() {
    this.info = JSON.parse(window.localStorage.getItem('info'))
    if(!this.info){
      return
    }
    
    let hours = new Date().getHours() > 10 ? new Date().getHours() : '0'+new Date().getHours()
    let minutes = new Date().getMinutes() > 10 ? new Date().getMinutes()+5 : '0'+new Date().getMinutes()+5

    this.tysj = this.info.sj.split(' ')[0]+" "+hours+":"+minutes
    // PubSub.subscribe("save", (msg, obj) => {
    //   // console.log(msg,obj)
    //   this.info = obj;
    //   this.tysj = this.info.sj.split(' ')[0]+" "+hours+minutes
    //   console.log(this.info,'---')
    //   window.localStorage.setItem("info", JSON.stringify(obj));
    // });
  },
};
</script>

<style scoped >

tr td:nth-child(2){
  padding-left: 3vw;
  text-align: left;
}
.top{
    color: rgb(62, 173, 229);
    font-size: 9pt;
    font-family: 微软雅黑, 宋体;
}
.top-box{
  padding: 4vh 2vw 1vh;
}
.pad{
  padding:  1vh 4vw;
}
.left{
  text-align: left;
}
.right{
  text-align: right;
}
.a{
  color: rgb(204, 51, 0);
  font-family: 微软雅黑, 宋体;
  text-decoration: underline;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

.linkeytable {
    margin-bottom: 4vh;
    border-collapse: collapse;
    border: 1px solid #cccccc;
    width: 100%;
    font-size: 9pt;
}
.linkeytable td.texttd {
    text-align: right;
    font-size: 12px;
    font-weight: bold;
    font-family: 微软雅黑, 宋体;
    padding-right: 10px;
    color: rgb(51, 51, 51);
    width: 15%;
    background: rgb(221, 234, 255);
}
.linkeytable td {
    border-collapse: collapse;
    height: 40px;
    font-size: 14px;
    font-family: 微软雅黑, 宋体;
    color: rgb(68, 68, 68);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(62, 173, 229);
    border-image: initial;
    padding: 2px 10px;
}
</style>

